<template>
  <!-- 图片预览 -->
  <a-modal
    width="60%"
    :visible="imgVisible"
    :footer="null"
    @cancel="imgVisible = false,itemFileUrl=''"
  >
    <div class="image">
      <viewer>
        <img :src="itemFileUrl | dealImageUrl" />
      </viewer>
    </div>
  </a-modal>
</template>

<script>
export default {
  data () {
    return {
      imgVisible: false,
      itemFileUrl: ''
    }
  },
  methods: {
    open (url) {
      this.itemFileUrl = url
      this.imgVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.image {
  img {
    display: block;
    width: 80%;
    margin: 10px auto;
  }
}
</style>
